<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_234')}}</h2>
            <div class="personCon"  @click="isShow=false">
                <div class="leftpanel">
                    <h2 class="persontitle">{{$t('l.personal_234')}}</h2>
                    <div class="rechargebar">
                        <div class="coinbar">
                            <div class="rechargecoin" @click.stop="showlist">
                                <img :src="coinIntro.icon" class="coinlogo">
                                <span>{{coinIntro.code}}</span>
                                <i></i>
                            </div>
                            <drop-down @inputValue="getInputValue" :placeholder="placeholder" @item-click="itemClick" :itemlist="coinlist" :nodatatext="nodatatext" :isShow="isShow" style="width:349px;top:78px;"></drop-down>
                        </div>
                        <div class="balancecoin">
                            <p>{{$t('l.market_about9')}}<span>{{coinIntro.totalprice}} {{coinIntro.code}}</span></p>
                            <p>{{$t('l.personal_199')}}<span>{{coinIntro.frozenAmount}} {{coinIntro.code}}</span></p>
                            <p>{{$t('l.personal_200')}}<span>{{coinIntro.availableAmount}} {{coinIntro.code}}</span></p>
                        </div>
                        <div class="rechargeaddress">
                            <p class="addrtitle">{{coinIntro.code}}{{$t('l.personal_235')}}</p>
                           <span class="fr" v-show="coinIntro.code=='USDT'">
                                        <div class="checktab fl">
                                            <a :class="type==18?'active':''" @click="itemClickUSDT(18)">ERC20</a>
                                            <a :class="type==4?'active':''" @click="itemClickUSDT(4)">OMNI</a>
                                        </div>
                                </span>
                            <select class="addrput" v-model="addr" :disabled="isWithdrawable==0?true:false">
                                <option v-for="(item,index) in tagList" :key="index" :value="item">{{item.address}}</option>
                            </select>
                            <div v-if="coinIntro.tagDescribe">
                                <p class="addrtitle">{{coinIntro.tagDescribe}}</p>
                                <input class="addrput" disabled="true" v-model="addr.remark">
                            </div>
                            <p class="addrtitle">{{$t('l.personal_236')}}</p>
                            <input class="addrput alignright" :disabled="isWithdrawable==0?true:false" @input="changefee" v-model="balance" :placeholder="$t('l.market_popup11')+coinIntro.availableAmount+coinIntro.code ">
                            <div class="clearfix">
                                <div class="disabledput">
                                    <span class="fl">{{$t('l.personal_237')}}</span>
                                    <span class="fr">{{coinIntro.fee}} {{coinIntro.code}}</span>
                                </div>
                                <div class="availableput">
                                    <span class="fl">{{$t('l.personal_238')}}</span>
                                    <input :value="amount+coinIntro.code" :disabled="isWithdrawable==0?true:false">
                                </div>
                            </div>
                            <a class="btn changebtn" @click.stop="checkaddr">{{$t('l.advert_about23')}}</a>
                        </div>
                    </div>
                </div>
                <div class="rightpanel">
                    <div class="tipbox">
                        <p class="tiptitle">{{$t('l.personal_64')}}</p>
                        <p class="tiptext">{{coinIntro.tips}}</p>
                        <!-- <p class="tiptext">1. 您可以在充提记录页面跟踪状态</p>
                        <p class="tiptext">2. 为保障资金安全，请务必确认电脑及浏览器安全，防止信息被篡改或泄露。</p>
                        <p class="tiptext">3. 最小提现数量为:{{coinIntro.minWithdrawAmount}} {{coinIntro.code}}。</p>
                        <p class="tiptext">4. 请勿直接提现至众筹或ICO地址.我们不会处理未来代币的发放.</p> -->
                    </div>
                </div>
            </div>
        </div>

        <!--安全校验-->
        <div class="popWraper" v-show="ischeck && status=='phone'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_43')}}</p>
                        <input class="comput small disabled" v-model="account" disabled="disabled" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active" @click="sendPhoneCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click="withdraw">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--邮箱校验-->
        <div class="popWraper"  v-show="ischeck && status=='email'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_46')}}</p>
                        <input class="comput small disabled" disabled="disabled" v-model="account" style="width:100%;">
                        <div class="putgroup clearfix padtop">
                            <input class="comput small" :placeholder="$t('l.personal_44')" v-model="verifyCode" style="width:210px;">
                            <p class="errortext"></p>
                            <button v-show="sendAuthCode" class="codebtn active fr" @click="sendEmailCode">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="codebtn">{{auth_time}}s</button>
                        </div>
                        <a class="btn allcell" @click="withdraw">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <!--谷歌校验-->
        <div class="popWraper" v-show="ischeck && status=='ga'">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.personal_42')}}</h2>
                    <i class="close" @click="ischeck = false;verifyCode = ''"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <p class="grouptitle">{{$t('l.personal_47')}}</p>
                        <input class="comput small" v-model="verifyCode" :placeholder="$t('l.personal_44')" style="width:100%;">
                        <a class="btn allcell martop30" @click="withdraw">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
import {compute} from '@/assets/js/compute';
import dropDown from "@/components/dropdown";
export default {
    components: {
        PersonalHeader,
        PersonalSide,
        dropDown
    },
    watch: {
        $route(){
            this.querycoin= this.$route.query.coin
        },
        querycoin(newValue, oldValue) {
           this.changecoin();
        }
    },
    inject:['reload'],
    data() {
        return {
            nodatatext: this.$t('l.add_37'),
            isShow:false,
            coinlist:[],
            datalist:[],
            coinIntro:"",
            coinIntroUSDT:"",
            tagList:[],
            addr:"",
            amount:"",
            balance:"",
            verifyCode:"",
            sendAuthCode:true,
            auth_time:120,
            ischeck:false,
            status:'phone',
            account:"",
            deviceType:"",
            querycoin:"",
            onceToken:"",
            currencyId:"",
            isWithdrawable:0,
            placeholder:this.$t('l.add_130'),
            idType:1,
            type:0
        }
    },
    created(){
        this.getCoins(); 
        let intro = this.$store.state.userintro;
        this.idType = intro.idType;
        if(intro.gaEnabled==1){
            this.status = "ga"
        }else if(intro.phoneEnabled==1){
            this.status = "phone"
        }else if(intro.emailEnabled==1){
            this.status = "email"
        }
        if(this.status=="phone"){
            this.account = this.$store.state.userintro.cellPhone
        }else if(this.status=="email"){
            this.account = this.$store.state.userintro.email
        }
        
    },
    methods:{
        checkaddr(){
            let that = this;
            if(that.addr==""){
                that.$layer.msg(that.$t('l.add_93'));
                return;
            }else if(that.balance=="" || !that.balance){
                that.$layer.msg(that.$t('l.add_94'));
                return;
            }else if(Number(that.balance)<Number(that.coinIntro.minWithdrawAmount)){
                that.$layer.msg(that.$t('l.add_95')+that.coinIntro.minWithdrawAmount+that.coinIntro.code);
                return;
            }
            that.ischeck = true;
        },
        getAuthCode() {
            this.sendAuthCode = false;
            this.auth_time = 120;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        }, 
        //发送邮箱验证码
        async sendEmailCode(){
            let that = this;
            let res = await api.sendEmailCode({
                email:that.account,
                type:"W"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //发送手机验证码
        async sendPhoneCode(){
            let that = this;
            let res = await api.sendPhoneCode({
                areaCode:that.$store.state.userintro.phoneArea,
                phone:that.account,
                type:"W"
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        itemClick(data) {
            this.currencyId = data.currencyId;
            this.findCoinAssets(data.currencyId);
            
            this.isShow = false;
            this.addr = "";
            if(data.code=="USDT"){
                if(this.type==0){
                    setTimeout(() =>{
                        this.itemClickUSDT(18);
                    },500);   
                }else{
                    setTimeout(() =>{
                        this.itemClickUSDT(this.type);
                    },500); 
                }
            }else{
                this.getAddress(data.code);
            }
        },
        itemClickUSDT(coinid) {
            console.log("点击id",coinid)
            this.currencyId = coinid;
            this.type=coinid;
            this.addr = "";
            this.findCoinAssetsUSDT(coinid);
            //this.getAddress(data.code);
            setTimeout(() =>{
                this.getAddress(this.coinIntroUSDT.code);
            },1000);            
            this.isShow = false;
        },
        getInputValue(searchvalue) {
            if(searchvalue==""){
                this.coinlist = this.datalist;
                return;
            }
            let coinlist = [];
            // 请求获取筛选列表
            this.datalist.forEach((item,index)=>{
                if(item.code.indexOf(searchvalue.toUpperCase()) != -1){
                    coinlist.push(item);
                }
            })
            this.coinlist = coinlist;
        },
        showlist(){
            this.isShow = !this.isShow;
        },
        changecoin(){
            let that = this;
            if(that.$route.query.coin){
                that.querycoin = that.$route.query.coin;
                that.coinlist.forEach((item,index)=>{
                    if(item.code == that.querycoin){
                        that.itemClick(item);
                    }
                })
            }
        },
        //获取币种列表
        async getCoins(){
            let that = this;
            let res = await api.coinsList({isWithdraw:true});
            if(res.data.code==0){
                that.coinlist = res.data.data;
                that.datalist = res.data.data;
                if(that.$route.query.coin){
                    that.changecoin();
                }else{
                    that.currencyId = res.data.data[0].currencyId;
                    that.findCoinAssets(res.data.data[0].currencyId);
                    that.getAddress(res.data.data[0].code);
                }
            }
        },
        //获取币种信息
        async findCoinAssets(id){
            let that = this;
            let res = await api.findByCurrencyId({currencyId:id});
            if(res.data.code==0){
                that.coinIntro = res.data.data;
                if(that.coinIntro.withdrawalFee < Number(that.coinIntro.withdrawalMinFee)){
                    that.coinIntro.fee = that.coinIntro.withdrawalMinFee
                }else{
                    that.coinIntro.fee = that.coinIntro.withdrawalFee;
                }
                that.coinIntro.totalprice = compute.dcmAdd(Number(that.coinIntro.frozenAmount),Number(that.coinIntro.availableAmount))
                if(that.coinIntro.withdrawTips.length>0){
                    that.coinIntro.tips = that.coinIntro.withdrawTips[0].content;
                }
                if(that.coinIntro.isWithdrawable==0){
                    that.$layer.msg(that.$t('l.add_92'));
                }
                that.isWithdrawable = that.coinIntro.isWithdrawable;
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //获取币种信息
        async findCoinAssetsUSDT(id){
            let that = this;
            let res = await api.findByCurrencyId({currencyId:id});
            if(res.data.code==0){
                that.coinIntroUSDT = res.data.data;
                that.coinIntro.withdrawalFee = that.coinIntroUSDT.withdrawalFee;
                that.coinIntro.withdrawalMinFee = that.coinIntroUSDT.withdrawalMinFee;
                if(that.coinIntro.withdrawalFee < Number(that.coinIntro.withdrawalMinFee)){
                    that.coinIntro.fee = that.coinIntro.withdrawalMinFee;
                }else{
                    that.coinIntro.fee = that.coinIntro.withdrawalFee;
                }
                that.coinIntro.totalprice = compute.dcmAdd(Number(that.coinIntro.frozenAmount),Number(that.coinIntro.availableAmount))
                if(that.coinIntroUSDT.withdrawTips.length>0){
                    that.coinIntro.tips = that.coinIntroUSDT.withdrawTips[0].content;
                }
                if(that.coinIntro.isWithdrawable==0){
                    that.$layer.msg(that.$t('l.add_92'));
                }
                that.isWithdrawable = that.coinIntro.isWithdrawable;
            }else{
                that.$layer.msg(res.data.msg);
            }
            //console.log("coinIntroUSDT",that.coinIntroUSDT);
        },
         //获取列表
        async getAddress(code){
            let that = this;
            let res = await api.addressTagList({
                currency:code,
                pageNum:1,
                pageSize:100
            });
            if(res.data.code==0){
                that.tagList = res.data.data.records;
            }
        },
        //获取一次性token
        async createOnceToken() {
            let that = this;
            let res = await api.createOnceToken();
            if (res.data.code == 0) {
                that.onceToken = res.data.data.resultToken;
            }
        },
        //提币
        async withdraw(){
            let that = this;
            if(that.verifyCode==""){
                that.$layer.msg(that.$t('l.add_89'));
                return;
            }
            let res = await api.withdraw({
                address:that.addr.address,
                addressExt:that.addr.remark,
                addressTag:that.addr.addressTag,
                amount:that.balance,
                currencyId:that.currencyId,
                deviceType:that.deviceType,
                verifyCode:that.verifyCode,
                onceToken:that.onceToken,
                addressTag:that.addr.tag
            });
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.personal_239'));
                that.verifyCode = "";
                that.ischeck = false;
                that.reload();
            }else if(res.data.code==1210012){
                that.$layer.msg(that.$t('l.personal_240')+res.data.msg);
                that.verifyCode = "";
                that.ischeck = false;
            }else if(res.data.code==1080005){
                that.$layer.msg(that.$t('l.personal_106'));
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else if(res.data.code==1210007){
                that.$layer.msg(that.$t('l.add_131'));
            }else if(res.data.code==1210023){
                that.$layer.msg(that.$t('l.add_137'));
            }else if(res.data.code==1210021){
                that.$layer.msg(that.$t('l.add_139'));
            }else if(res.data.code==1210024 && that.idType==1){
                that.$layer.msg(that.$t('l.add_160'));
            }else if(res.data.code==1210024 && that.idType!==1){
                that.$layer.msg(that.$t('l.add_161'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //计算手续费
        changefee(){
            let that = this;
            if(that.coinIntro.withdrawalFeeType=="F"){
                let fee = that.coinIntro.withdrawalFee;
                if(fee<that.coinIntro.withdrawalMinFee){
                    that.coinIntro.fee = that.coinIntro.withdrawalMinFee
                }else{
                    that.coinIntro.fee = fee;
                }
                that.amount = compute.dcmReduce(that.balance,that.coinIntro.fee);
            }else{
                let fee = compute.accMul(that.balance,that.coinIntro.withdrawalFee);
                if(fee<that.coinIntro.withdrawalMinFee){
                    
                    that.coinIntro.fee = that.coinIntro.withdrawalMinFee
                }else{
                    that.coinIntro.fee = fee;
                }
                
                that.amount = compute.dcmReduce(that.balance,that.coinIntro.fee);
                if(that.amount<0){
                    that.amount = 0;
                }
            }
        }
    },
    mounted(){
        this.createOnceToken();
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .rechargebar{
        width:712px;
        margin:58px auto;
        .coinbar{
            float:left;
            width:346px;
            position:relative;
        }
        .rechargecoin{
            float:left;
            width:346px;
            height:80px;
            border-radius:6px;
            border:1px solid rgba(221,224,235,1);
            padding:20px 25px;
            box-sizing: border-box;
            .coinlogo{
                float:left;
                width:40px;
                height:40px;
                margin-right:21px;
            }
            span{
                float:left;
                font-size:20px;
                font-familyA:"OpenSans-Semibold";
                font-weight:600;
                color:rgba(51,56,94,1);
                line-height:27px;
                padding-top:8px;
            }
            i{
                float:right;
                margin-right:10px;
                margin-top:16px;
                width:14px;
                height:8px;
                background:url(../../assets/images/arrow_btm.png) no-repeat center;
            }
        }
        .balancecoin{
            float:right;
            p{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:10px;
                span{
                    padding-left:30px;
                    font-familyA:"OpenSans";
                }
            }
        }
        .checktab{
                padding-right:24px;
                a{
                    width:82px;
                    height:32px;
                    border:1px solid rgba(221,224,235,1);
                    box-sizing: border-box;
                    text-align:center;
                    color:rgba(51,56,94,1);
                    line-height:32px;
                    float:left;
                    cursor: pointer;
                    &:first-child{
                        border-top-left-radius: 4px;
                        border-bottom-left-radius: 4px;
                    }
                    &:last-child{
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                    }
                    &.active{
                        background:#2D8DFE;
                        background: linear-gradient(90deg, #3360FF 0%, #04A6FE 100%);
                        color:#fff;
                        border:none;
                    }
                }
            }
        .rechargeaddress{
            width:100%;
            background:rgba(247,248,252,1);
            border-radius:4px;
            border:1px solid rgba(233,238,244,1);
            box-sizing:border-box;
            padding:40px 47px 60px 30px;
            clear:both;
            position: relative;
            top: 40px;
            .addrtitle{
                font-size:16px;
                font-weight:500;
                color:rgba(51,56,94,1);
                line-height:22px;
                padding-bottom:8px;
                span{
                    color:#2D8DFE;
                    padding-left:18px;
                }
            }
            .addrput{
                width:100%;
                height:40px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px solid rgba(221,224,235,1);
                line-height:40px;
                text-indent:10px;
                font-size:14px;
                font-weight:500;
                color:rgba(51,56,94,1);
                line-height:24px;
                margin-bottom:24px;
                box-sizing: border-box;
                &.alignright{text-align: right;padding-right:10px;}
            }
            .disabledput{
                width:307px;
                height:40px;
                background:rgba(249,249,255,1);
                border-radius:4px;
                border:1px solid rgba(221,224,235,1);
                float:left;
                box-sizing: border-box;
                padding:0 10px;
                span{
                    font-size:14px;
                    font-weight:500;
                    color:rgba(51,56,94,1);
                    line-height:40px;
                }
            }
            .availableput{
                width:307px;
                height:40px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px solid rgba(221,224,235,1);
                float:right;
                box-sizing: border-box;
                padding:0 10px;
                span{
                    font-size:14px;
                    font-weight:500;
                    color:rgba(51,56,94,1);
                    line-height:40px;
                }
                input{
                    overflow:hidden; 
                    font-weight:500;
                    color:rgba(51,56,94,1);
                    line-height:40px;
                    text-align:right;
                    width: 68%;
                }
            }
            .changebtn{
                width: 100%;
                height: 40px;
                margin-top: 50px;
                line-height: 40px;
            }
        }
    }
    .rightpanel{
        .tipbox{
            background:rgba(240,242,253,1);
            border-radius:4px;
            border:1px solid #2D8DFE;
            padding:34px 20px;
            box-sizing: border-box;
            height: 100%;
            overflow-y: scroll;
            .tiptitle{
                line-height:24px;
                font-weight:500;
                color:rgba(51,56,94,1);
                font-size:16px;
                padding-left:34px;
                background:url(../../assets/images/tip.png) no-repeat left center;
                margin-bottom:26px;
            }
            .tiptext{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:24px;
            }
        }
    }
}
</style>



